const ringChartsList = [
  {
    center: ["16%", "20%"],
    color: ["rgba(145, 169, 178, 0.3)", "#87CDFF"]
  },
  {
    center: ["64%", "20%"],
    color: ["rgba(145, 169, 178, 0.3)", "#FFB89C"]
  },
  {
    center: ["16%", "65%"],
    color: ["rgba(145, 169, 178, 0.3)", "#FF744C"]
  },
  {
    center: ["64%", "65%"],
    color: ["rgba(145, 169, 178, 0.3)", "#91A9B2"]
  }
];

/**
 * 多环形图配置处理方法
 * @param {Array<Object>} data 传入相关数据
 * @returns {Object} 返回 Echarts Option 配置
 */
export const multipleRingOptionHandler = (data = []) => {
  const seriesList = [];
  data.forEach((item, index) => {
    const chartsData = ringChartsList[index];
    seriesList.push(createRingChart(item, { ...chartsData }));
  });

  return {
    graphic: createGraphicConf(data),
    series: seriesList
  };
};

/**
 * 创建环形图配置处理方法
 * @param {Object} data 传入相关数据
 * @param {Object} options 传入相关配置数据
 * @returns {Object} 返回 Echarts Series Ring Option 配置
 */
const createRingChart = (data, options = {}) => {
  const diffVal = 100 - data.rate;
  return {
    type: "pie",
    radius: ["30%", "35%"],
    data: [
      {
        value: data.rate,
        itemStyle: { color: options.color[1] }
      },
      {
        value: diffVal,
        itemStyle: { color: options.color[0] }
      }
    ],
    label: createRich(data),
    ...options
  };
};

/**
 * 创建相关 Graphic 配置方法
 * @param {Object} data 传入相关数据
 * @returns {Object} 返回 Echarts Option Graphic 配置
 */
const createGraphicConf = data => {
  const graphicList = [];
  ringChartsList.forEach((item, index) => {
    const { center, color } = item;
    const isSingular = data[index].rate < 10 ? 0 : 1;
    const offsetData = {
      top: `${parseInt(center[1]) - 2}%`,
      left: `${parseInt(center[0]) - 2 - isSingular}%`
    };
    graphicList.push({
      type: "text",
      style: {
        text: `${data[index].rate}%`,
        textAlign: "center",
        fill: color[1],
        fontSize: 12,
        lineHeight: 12
      },
      ...offsetData
    });
  });

  return graphicList;
};

/**
 * 创建富文本方法
 * @param {Object} data 传入相关数据
 * @return {Object} 返回富文本配置
 */
const createRich = data => {
  const { title, isCollect, price } = data;
  return {
    show: true,
    position: "center",
    padding: [5, -160, 0, 0],
    formatter: [
      `{title|${title}\n}`,
      `{isCollect|${isCollect}\n}`,
      `{price|${price}}`,
      " {unit|万元}"
    ].join(""),
    color: "#fff",
    fontSize: 11,
    lineHeight: 18,
    rich: {
      title: { align: "left" },
      isCollect: { align: "left" },
      price: { fontSize: 12, color: "#B0E0FF", align: "left" },
      unit: { fontSize: 8 }
    }
  };
};
